function showArticleIndex() {
    // 先刷一遍文章有哪些节点，把 h1 h2 h3 加入列表，等下循环进行处理。
    // 如果不够，可以加上 h4 ,只是我个人觉得，前 3 个就够了，出现第 4 层就目录就太长了，太细节了。
    var h1List = h2List = h3List = [];
    var labelList = $(".post-content").children();
    for (var i = 0; i < labelList.length; i++) {
        // if ($(labelList[i]).is("h1")) {
        //     h2List = new Array();
        //     h1List.push({ node: $(labelList[i]), id: i, children: h2List });
        // }

        if ($(labelList[i]).is("h2")) {
            h3List = new Array();
            h2List.push({ node: $(labelList[i]), id: i, children: h3List });
        }

        // if ($(labelList[i]).is("h3")) {
        //     h3List.push({ node: $(labelList[i]), id: i, children: [] });
        // }
    }

    // 闭包递归，返回树状 html 格式的文章目录索引
    function show(tocList) {
        var content = "<ul class='index-menu-list'>";
        tocList.forEach(function(toc) {
            toc.node.before('<span class="anchor" id="_label' + toc.id + '"></span>');
            if (toc.children == 0) {
                content += '<li class="index-menu-item"><a class="index-menu-link" href="#_label' + toc.id + '">' + toc.node.text() + '</a></li>';
            } else {
                content += '<li class="index-menu-item"><a class="index-menu-link" href="#_label' + toc.id + '">' + toc.node.text() + '</a>' + show(toc.children) + '</li>';
            }
        });
        content += "</ul>"
        return content;
    }

    // 最后组合成 div 方便 css 设计样式，添加到指定位置
    $(".index-menu").empty();
    $(".index-menu").append(show(h1List));

    // 点击目录索引链接，动画跳转过去，不是默认闪现过去
    $(".index-menu a").on("click", function(e) {
        e.preventDefault();
        // 获取当前点击的 a 标签，并前触发滚动动画往对应的位置
        var target = $(this.hash);
        $("body, html").animate({ 'scrollTop': target.offset().top },
            500
        );
    });

    // 监听浏览器滚动条，当浏览过的标签，给他上色。
    $(window).on("scroll", function(e) {
        var anchorList = $(".anchor");
        anchorList.each(function() {
            var tocLink = $('#toc-wrap a[href="#' + $(this).attr("id") + '"]');
            var anchorTop = $(this).offset().top;
            var windowTop = $(window).scrollTop();
            if (anchorTop <= windowTop + 50) {
                tocLink.addClass("read");
            } else {
                tocLink.removeClass("read");
            }
        });
    });
}

function showToc() {
    $('#toggle-menu-tree').on('click', function() {
        $('#wrap').removeClass("scale-up").removeClass("display-nav").toggleClass("display-menu-tree");
    });
}

function donate() {
    $('#toggle-reward-qr-code').on('click', function() {
        $('body').removeClass("show-post-qr-box").toggleClass("show-reward-qr-box");
    });
    // reward-qr-code-box
}

function showQr() {
    $('#toggle-post-qr-code').on('click', function() {
        $('body').removeClass("show-reward-qr-box").toggleClass("show-post-qr-box");
    });
}

function caption() {
    $('.post-content').each(function(i) {
        $(this).find('img').each(function() {
            if ($(this).parent().hasClass('fancybox')) return;

            var alt = this.alt;

            if (alt) $(this).after('<div class="zoom-img-wrap">' + alt + '</div>');

            $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
        });

        $(this).find('.fancybox').each(function() {
            $(this).attr('rel', 'article' + i);
        });
    });

    if ($.fancybox) {
        $('.fancybox').fancybox();
    }
}

function showsearch() {
    $('#navbar-search').on('click', function() {
        $('body').toggleClass("show-navbar-search");
    });
}